SharePoint Online CSS Classes
CSS classes to be used in JSON column formatters and SharePoint Framework solutions. These CSS classes are used by the modern SharePoint UI. Here you can see a preview of every CSS class.
| debug |
| dropHintlineBottom |
| dropHintlineLeft |
| dropHintlineRight |
| dropHintLineStyle |
| dropHintlineTop |
| ms-bgColor-black |
| ms-bgColor-blue |
| ms-bgColor-blueDark |
| ms-bgColor-blueLight |
| ms-bgColor-blueMid |
| ms-bgColor-communicationPrimary |
| ms-bgColor-communicationShade10 |
| ms-bgColor-communicationShade20 |
| ms-bgColor-communicationShade30 |
| ms-bgColor-communicationTint10 |
| ms-bgColor-communicationTint20 |
| ms-bgColor-communicationTint30 |
| ms-bgColor-communicationTint40 |
| ms-bgColor-contrastBlackDisabled |
| ms-bgColor-contrastBlackSelected |
| ms-bgColor-contrastWhiteDisabled |
| ms-bgColor-contrastWhiteSelected |
| ms-bgColor-error |
| ms-bgColor-gray10 |
| ms-bgColor-gray100 |
| ms-bgColor-gray110 |
| ms-bgColor-gray120 |
| ms-bgColor-gray130 |
| ms-bgColor-gray140 |
| ms-bgColor-gray150 |
| ms-bgColor-gray160 |
| ms-bgColor-gray170 |
| ms-bgColor-gray180 |
| ms-bgColor-gray190 |
| ms-bgColor-gray20 |
| ms-bgColor-gray200 |
| ms-bgColor-gray210 |
| ms-bgColor-gray220 |
| ms-bgColor-gray30 |
| ms-bgColor-gray40 |
| ms-bgColor-gray50 |
| ms-bgColor-gray60 |
| ms-bgColor-gray70 |
| ms-bgColor-gray80 |
| ms-bgColor-gray90 |
| ms-bgColor-green |
| ms-bgColor-greenDark |
| ms-bgColor-greenLight |
| ms-bgColor-info |
| ms-bgColor-magenta |
| ms-bgColor-magentaDark |
| ms-bgColor-magentaLight |
| ms-bgColor-neutralDark |
| ms-bgColor-neutralLight |
| ms-bgColor-neutralLighter |
| ms-bgColor-neutralLighterAlt |
| ms-bgColor-neutralPrimary |
| ms-bgColor-neutralPrimaryAlt |
| ms-bgColor-neutralQuaternary |
| ms-bgColor-neutralQuaternaryAlt |
| ms-bgColor-neutralSecondary |
| ms-bgColor-neutralSecondaryAlt |
| ms-bgColor-neutralTertiary |
| ms-bgColor-neutralTertiaryAlt |
| ms-bgColor-orange |
| ms-bgColor-orangeLight |
| ms-bgColor-orangeLighter |
| ms-bgColor-purple |
| ms-bgColor-purpleDark |
| ms-bgColor-purpleLight |
| ms-bgColor-red |
| ms-bgColor-redDark |
| ms-bgColor-severeWarning |
| ms-bgColor-sharedBlue10 |
| ms-bgColor-sharedBlueMagenta10 |
| ms-bgColor-sharedBlueMagenta20 |
| ms-bgColor-sharedBlueMagenta30 |
| ms-bgColor-sharedBlueMagenta40 |
| ms-bgColor-sharedCyan10 |
| ms-bgColor-sharedCyan20 |
| ms-bgColor-sharedCyan30 |
| ms-bgColor-sharedCyan40 |
| ms-bgColor-sharedCyanBlue10 |
| ms-bgColor-sharedCyanBlue20 |
| ms-bgColor-sharedGray10 |
| ms-bgColor-sharedGray20 |
| ms-bgColor-sharedGray30 |
| ms-bgColor-sharedGray40 |
| ms-bgColor-sharedGreen10 |
| ms-bgColor-sharedGreen20 |
| ms-bgColor-sharedGreenCyan10 |
| ms-bgColor-sharedMagenta10 |
| ms-bgColor-sharedMagenta20 |
| ms-bgColor-sharedMagentaPink10 |
| ms-bgColor-sharedMagentaPink20 |
| ms-bgColor-sharedOrange10 |
| ms-bgColor-sharedOrange20 |
| ms-bgColor-sharedOrange30 |
| ms-bgColor-sharedOrangeYellow10 |
| ms-bgColor-sharedOrangeYellow20 |
| ms-bgColor-sharedPinkRed10 |
| ms-bgColor-sharedRed10 |
| ms-bgColor-sharedRed20 |
| ms-bgColor-sharedRedOrange10 |
| ms-bgColor-sharedRedOrange20 |
| ms-bgColor-sharedYellow10 |
| ms-bgColor-sharedYellowGreen10 |
| ms-bgColor-success |
| ms-bgColor-teal |
| ms-bgColor-tealDark |
| ms-bgColor-tealLight |
| ms-bgColor-themeDark |
| ms-bgColor-themeDarkAlt |
| ms-bgColor-themeDarker |
| ms-bgColor-themeLight |
| ms-bgColor-themeLighter |
| ms-bgColor-themeLighterAlt |
| ms-bgColor-themePrimary |
| ms-bgColor-themeSecondary |
| ms-bgColor-themeTertiary |
| ms-bgColor-warning |
| ms-bgColor-white |
| ms-bgColor-yellow |
| ms-bgColor-yellowLight |
| ms-ConfigureFlowsPanel-disabled |
| ms-ConfigureFlowsPanel-error |
| ms-ContextualMenu |
| ms-ContextualMenu-itemText |
| ms-CurrentIBSegmentDisplayView-ErrorMessage |
| ms-CurrentIBSegmentDisplayView-sectionTitle |
| ms-DateCondition-ArrowIcon |
| ms-fontColor-alert |
| ms-fontColor-black |
| ms-fontColor-blue |
| ms-fontColor-blueDark |
| ms-fontColor-blueLight |
| ms-fontColor-blueMid |
| ms-fontColor-communicationPrimary |
| ms-fontColor-communicationShade10 |
| ms-fontColor-communicationShade20 |
| ms-fontColor-communicationShade30 |
| ms-fontColor-communicationTint10 |
| ms-fontColor-communicationTint20 |
| ms-fontColor-communicationTint30 |
| ms-fontColor-communicationTint40 |
| ms-fontColor-contrastBlackDisabled |
| ms-fontColor-contrastBlackSelected |
| ms-fontColor-contrastWhiteDisabled |
| ms-fontColor-contrastWhiteSelected |
| ms-fontColor-error |
| ms-fontColor-gray10 |
| ms-fontColor-gray100 |
| ms-fontColor-gray110 |
| ms-fontColor-gray120 |
| ms-fontColor-gray130 |
| ms-fontColor-gray140 |
| ms-fontColor-gray150 |
| ms-fontColor-gray160 |
| ms-fontColor-gray170 |
| ms-fontColor-gray180 |
| ms-fontColor-gray190 |
| ms-fontColor-gray20 |
| ms-fontColor-gray200 |
| ms-fontColor-gray210 |
| ms-fontColor-gray220 |
| ms-fontColor-gray30 |
| ms-fontColor-gray40 |
| ms-fontColor-gray50 |
| ms-fontColor-gray60 |
| ms-fontColor-gray70 |
| ms-fontColor-gray80 |
| ms-fontColor-gray90 |
| ms-fontColor-green |
| ms-fontColor-greenDark |
| ms-fontColor-greenLight |
| ms-fontColor-info |
| ms-fontColor-magenta |
| ms-fontColor-magentaDark |
| ms-fontColor-magentaLight |
| ms-fontColor-neutralDark |
| ms-fontColor-neutralLight |
| ms-fontColor-neutralLighter |
| ms-fontColor-neutralLighterAlt |
| ms-fontColor-neutralPrimary |
| ms-fontColor-neutralPrimaryAlt |
| ms-fontColor-neutralQuaternary |
| ms-fontColor-neutralQuaternaryAlt |
| ms-fontColor-neutralSecondary |
| ms-fontColor-neutralSecondaryAlt |
| ms-fontColor-neutralTertiary |
| ms-fontColor-neutralTertiaryAlt |
| ms-fontColor-orange |
| ms-fontColor-orangeLight |
| ms-fontColor-orangeLighter |
| ms-fontColor-purple |
| ms-fontColor-purpleDark |
| ms-fontColor-purpleLight |
| ms-fontColor-red |
| ms-fontColor-redDark |
| ms-fontColor-severeWarning |
| ms-fontColor-sharedBlue10 |
| ms-fontColor-sharedBlueMagenta10 |
| ms-fontColor-sharedBlueMagenta20 |
| ms-fontColor-sharedBlueMagenta30 |
| ms-fontColor-sharedBlueMagenta40 |
| ms-fontColor-sharedCyan10 |
| ms-fontColor-sharedCyan20 |
| ms-fontColor-sharedCyan30 |
| ms-fontColor-sharedCyan40 |
| ms-fontColor-sharedCyanBlue10 |
| ms-fontColor-sharedCyanBlue20 |
| ms-fontColor-sharedGray10 |
| ms-fontColor-sharedGray20 |
| ms-fontColor-sharedGray30 |
| ms-fontColor-sharedGray40 |
| ms-fontColor-sharedGreen10 |
| ms-fontColor-sharedGreen20 |
| ms-fontColor-sharedGreenCyan10 |
| ms-fontColor-sharedMagenta10 |
| ms-fontColor-sharedMagenta20 |
| ms-fontColor-sharedMagentaPink10 |
| ms-fontColor-sharedMagentaPink20 |
| ms-fontColor-sharedOrange10 |
| ms-fontColor-sharedOrange20 |
| ms-fontColor-sharedOrange30 |
| ms-fontColor-sharedOrangeYellow10 |
| ms-fontColor-sharedOrangeYellow20 |
| ms-fontColor-sharedPinkRed10 |
| ms-fontColor-sharedRed10 |
| ms-fontColor-sharedRed20 |
| ms-fontColor-sharedRedOrange10 |
| ms-fontColor-sharedRedOrange20 |
| ms-fontColor-sharedYellow10 |
| ms-fontColor-sharedYellowGreen10 |
| ms-fontColor-success |
| ms-fontColor-teal |
| ms-fontColor-tealDark |
| ms-fontColor-tealLight |
| ms-fontColor-themeDark |
| ms-fontColor-themeDarkAlt |
| ms-fontColor-themeDarker |
| ms-fontColor-themeLight |
| ms-fontColor-themeLighter |
| ms-fontColor-themeLighterAlt |
| ms-fontColor-themePrimary |
| ms-fontColor-themeSecondary |
| ms-fontColor-themeTertiary |
| ms-fontColor-warning |
| ms-fontColor-white |
| ms-fontColor-yellow |
| ms-fontColor-yellowLight |
| ms-font-l |
| ms-font-m |
| ms-font-mi |
| ms-font-m-plus |
| ms-font-s |
| ms-fontSize-10 |
| ms-fontSize-12 |
| ms-fontSize-14 |
| ms-fontSize-16 |
| ms-fontSize-18 |
| ms-fontSize-20 |
| ms-fontSize-24 |
| ms-fontSize-28 |
| ms-fontSize-32 |
| ms-fontSize-42 |
| ms-fontSize-68 |
| ms-fontSize-l |
| ms-fontSize-m |
| ms-fontSize-mi |
| ms-fontSize-mPlus |
| ms-fontSize-s |
| ms-fontSize-sPlus |
| ms-fontSize-su |
| ms-fontSize-xl |
| ms-fontSize-xlPlus |
| ms-fontSize-xs |
| ms-fontSize-xxl |
| ms-font-s-plus |
| ms-font-su |
| ms-fontWeight-bold |
| ms-fontWeight-light |
| ms-fontWeight-regular |
| ms-fontWeight-semibold |
| ms-fontWeight-semilight |
| ms-font-xl |
| ms-font-xl-plus |
| ms-font-xs |
| ms-font-xxl |
| ms-RadioButton-field |
| ms-RadioButton-input |
| ms-siteLogoAcronym |
| od-addColumnIcon |
| od-alert |
| od-Banner |
| od-SharingSection-PermissionsPile-addFriend |
| od-TextField-field |
| od-Toggle-description |
| od-Toggle-field |
| od-Toggle-input |
| od-TopBar-header-hidden |
| od-TopBar-item |
| ProgressSpinnerFlat |
| sp-ColorPickerButton-previewIcon |
| sp-ColorPicker-previewSvg |
| sp-ColumnCustomizationPane-monaco-editor |
| sp-ColumnDesigner-errorText |
| sp-css-backgroundColor-black |
| sp-css-backgroundColor-blockingBackground |
| sp-css-backgroundColor-blockingBackground30 |
| sp-css-backgroundColor-blockingBackground40 |
| sp-css-backgroundColor-blockingBackground50 |
| sp-css-backgroundColor-blue |
| sp-css-backgroundColor-blueBackground07 |
| sp-css-backgroundColor-blueBackground17 |
| sp-css-backgroundColor-blueBackground27 |
| sp-css-backgroundColor-blueBackground37 |
| sp-css-backgroundColor-blueDark |
| sp-css-backgroundColor-blueLight |
| sp-css-backgroundColor-disabledBackground |
| sp-css-backgroundColor-disabledSubtext |
| sp-css-backgroundColor-disabledText |
| sp-css-backgroundColor-Divider |
| sp-css-backgroundColor-errorBackground |
| sp-css-backgroundColor-errorBackground30 |
| sp-css-backgroundColor-errorBackground40 |
| sp-css-backgroundColor-errorBackground50 |
| sp-css-backgroundColor-errorText |
| sp-css-backgroundColor-green |
| sp-css-backgroundColor-greenLight |
| sp-css-backgroundColor-listBackground |
| sp-css-backgroundColor-listItemBackgroundChecked |
| sp-css-backgroundColor-listTextColor |
| sp-css-backgroundColor-neutralBackground |
| sp-css-backgroundColor-neutralBackground10 |
| sp-css-backgroundColor-neutralBackground20 |
| sp-css-backgroundColor-neutralBackground30 |
| sp-css-backgroundColor-neutralDark |
| sp-css-backgroundColor-neutralLight |
| sp-css-backgroundColor-neutralLighter |
| sp-css-backgroundColor-neutralLighterAlt |
| sp-css-backgroundColor-neutralPrimary |
| sp-css-backgroundColor-neutralPrimaryAlt |
| sp-css-backgroundColor-neutralQuaternary |
| sp-css-backgroundColor-neutralQuaternaryAlt |
| sp-css-backgroundColor-neutralSecondary |
| sp-css-backgroundColor-neutralTertiary |
| sp-css-backgroundColor-neutralTertiaryAlt |
| sp-css-backgroundColor-noFill |
| sp-css-backgroundColor-purple |
| sp-css-backgroundColor-red |
| sp-css-backgroundColor-redDark |
| sp-css-backgroundColor-Subtext |
| sp-css-backgroundColor-successBackground |
| sp-css-backgroundColor-successBackground30 |
| sp-css-backgroundColor-successBackground40 |
| sp-css-backgroundColor-successBackground50 |
| sp-css-backgroundColor-Text |
| sp-css-backgroundColor-themeDark |
| sp-css-backgroundColor-themeDarkAlt |
| sp-css-backgroundColor-themeDarker |
| sp-css-backgroundColor-themeLight |
| sp-css-backgroundColor-themeLighter |
| sp-css-backgroundColor-themeLighterAlt |
| sp-css-backgroundColor-themePrimary |
| sp-css-backgroundColor-themeSecondary |
| sp-css-backgroundColor-themeTertiary |
| sp-css-backgroundColor-warningBackground |
| sp-css-backgroundColor-warningBackground30 |
| sp-css-backgroundColor-warningBackground40 |
| sp-css-backgroundColor-warningBackground50 |
| sp-css-backgroundColor-white |
| sp-css-backgroundColor-yellow |
| sp-css-backgroundColor-yellowLight |
| sp-css-borderBottomColor-Background |
| sp-css-borderTop-blockingBorder |
| sp-css-borderTop-blueBorder |
| sp-css-borderTopColor-Background |
| sp-css-borderTop-errorBorder |
| sp-css-borderTop-neutralBorder |
| sp-css-borderTop-successBorder |
| sp-css-borderTop-warningBorder |
| sp-css-color-Background |
| sp-css-color-black |
| sp-css-color-blockingBackground |
| sp-css-color-blue |
| sp-css-color-blueDark |
| sp-css-color-blueLight |
| sp-css-color-disabledBackground |
| sp-css-color-disabledSubtext |
| sp-css-color-disabledText |
| sp-css-color-Divider |
| sp-css-color-errorBackground |
| sp-css-color-errorText |
| sp-css-color-green |
| sp-css-color-greenLight |
| sp-css-color-listBackground |
| sp-css-color-listItemBackgroundChecked |
| sp-css-color-listTextColor |
| sp-css-color-neutralDark |
| sp-css-color-neutralLight |
| sp-css-color-neutralLighter |
| sp-css-color-neutralLighterAlt |
| sp-css-color-neutralPrimary |
| sp-css-color-neutralPrimaryAlt |
| sp-css-color-neutralQuaternary |
| sp-css-color-neutralQuaternaryAlt |
| sp-css-color-neutralSecondary |
| sp-css-color-neutralTertiary |
| sp-css-color-neutralTertiaryAlt |
| sp-css-color-purple |
| sp-css-color-red |
| sp-css-color-redDark |
| sp-css-color-Subtext |
| sp-css-color-successBackground |
| sp-css-color-Text |
| sp-css-color-themeDark |
| sp-css-color-themeDarkAlt |
| sp-css-color-themeDarker |
| sp-css-color-themeLight |
| sp-css-color-themeLighter |
| sp-css-color-themeLighterAlt |
| sp-css-color-themePrimary |
| sp-css-color-themeSecondary |
| sp-css-color-themeTertiary |
| sp-css-color-warningBackground |
| sp-css-color-white |
| sp-css-color-yellow |
| sp-css-color-yellowLight |
| sp-DateField-CalIcon |
| sp-DateField-Input |
| sp-DateTimePicker-Time |
| sp-field-blue |
| sp-field-blue17 |
| sp-field-blue27 |
| sp-field-blue37 |
| sp-field-bold |
| sp-field-borderAllBold |
| sp-field-borderAllDashed |
| sp-field-borderAllDotted |
| sp-field-borderAllRegular |
| sp-field-borderAllSemibold |
| sp-field-borderAllSolid |
| sp-field-borderBottomBold |
| sp-field-borderBottomDashed |
| sp-field-borderBottomDotted |
| sp-field-borderBottomSemibold |
| sp-field-borderBottomSolid |
| sp-field-borderLeftBold |
| sp-field-borderLeftDashed |
| sp-field-borderLeftDotted |
| sp-field-borderLeftRegular |
| sp-field-borderLeftRightBold |
| sp-field-borderLeftRightDashed |
| sp-field-borderLeftRightDotted |
| sp-field-borderLeftRightRegular |
| sp-field-borderLeftRightSemibold |
| sp-field-borderLeftRightSolid |
| sp-field-borderLeftSemibold |
| sp-field-borderLeftSolid |
| sp-field-borderRightBold |
| sp-field-borderRightDashed |
| sp-field-borderRightDotted |
| sp-field-borderRightRegular |
| sp-field-borderRightSemibold |
| sp-field-borderRightSolid |
| sp-field-borderTopBold |
| sp-field-borderTopBottomBold |
| sp-field-borderTopBottomDashed |
| sp-field-borderTopBottomDotted |
| sp-field-borderTopBottomRegular |
| sp-field-borderTopBottomSemibold |
| sp-field-borderTopBottomSolid |
| sp-field-borderTopDashed |
| sp-field-borderTopDotted |
| sp-field-borderTopRegular |
| sp-field-borderTopSemibold |
| sp-field-borderTopSolid |
| sp-field-customFormatter |
| sp-field-dashedBorderRight |
| sp-field-dataBars |
| sp-field-fontSize14 |
| sp-field-fontSize15 |
| sp-field-fontSize17 |
| sp-field-fontSize21 |
| sp-field-fontSize24 |
| sp-field-fontSize28 |
| sp-field-fontSize32 |
| sp-field-fontSize36 |
| sp-field-fontSize42 |
| sp-field-italic |
| sp-field-neutral |
| sp-field-neutral20 |
| sp-field-neutral30 |
| sp-field-quickAction |
| sp-field-severity--blocked |
| sp-field-severity--blocked30 |
| sp-field-severity--blocked40 |
| sp-field-severity--blocked50 |
| sp-field-severity--good |
| sp-field-severity--good30 |
| sp-field-severity--good40 |
| sp-field-severity--good50 |
| sp-field-severity--low |
| sp-field-severity--severeWarning |
| sp-field-severity--severeWarning30 |
| sp-field-severity--severeWarning40 |
| sp-field-severity--severeWarning50 |
| sp-field-severity--warning |
| sp-field-severity--warning30 |
| sp-field-severity--warning40 |
| sp-field-severity--warning50 |
| sp-field-strikeThrough |
| sp-field-trending--down |
| sp-field-trending--up |
| sp-field-underline |
| sp-field-underlineStrikeThrough |
| sp-List-color0 |
| sp-List-color1 |
| sp-List-color10 |
| sp-List-color11 |
| sp-List-color2 |
| sp-List-color3 |
| sp-List-color4 |
| sp-List-color5 |
| sp-List-color6 |
| sp-List-color7 |
| sp-List-color8 |
| sp-List-color9 |